<!DOCTYPE html>
<html>
<div id="httpCfg" class="portlet-body form">
  <div class="clear">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">基本配置</span>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">字符集编码</label>
      <div class="col-sm-8">
        <select name="charset" field="charset" required class="form-control select2">
          <option value="UTF-8">UTF-8编码</option>
          <option value="GBK">GBK编码</option>
        </select>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">是否启用</label>
      <div class="col-sm-8">
        <select name="enable" field="enable" required class="form-control select2">
          <option value="true">是</option>
          <option value="false">否</option>
        </select>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">解码类型</label>
      <div class="col-sm-8">
        <select id="comm_type_Select" name="decodeType" field="decodeType" class="form-control select2">
          <option value="">不解码</option>
          <option value="url">URL解码</option>
        </select>
      </div>
    </div>
    <div class="form-group col-sm-6" style="margin-bottom: 10px;">
      <label class="control-label col-sm-4 is-required">服务地址</label>
      <div class="col-sm-8" style="margin-bottom: 10px;">
        <input id="address_txt" name="address" field="address" class="form-control" required/>
      </div>
    </div>


    <div id="out_type_div">
      <div class="form-group col-sm-6">
        <label class="control-label col-sm-4">连接超时时间(秒)</label>
        <div class="col-sm-8">
          <input id="conTimeout_txt" name="conTimeout" field="conTimeout" type="text" value="20000" class="form-control"/>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="control-label col-sm-4">连接池最大连接数</label>
        <div class="col-sm-8">
          <input id="maxConCount_txt" name="maxConCount" field="maxConCount" type="text" value="10" class="form-control"/>
        </div>
      </div>
    </div>

    <div id="in_type_div">
      <div class="form-group col-sm-6">
        <label class="control-label col-sm-4">空闲连接超时时间(秒)</label>
        <div class="col-sm-8">
          <input id="" name="conTimeout" field="conTimeout" type="digits" class="form-control"/>
        </div>
      </div>
      <div class="form-group col-sm-6">
        <label class="control-label col-sm-4">等待连接队列大小</label>
        <div class="col-sm-8">
          <input id="backlog_txt" name="backlog" field="backlog" type="digits" value="50" class="form-control"/>
        </div>
      </div>
    </div>
  </div>


  <div id="threadPool_div" class="clear">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">线程池配置</span>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">最大线程数</label>
      <div class="col-sm-8">
        <input id="maxSize_txt" name="maxSize" field="maxSize" type="number" min="1" required class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">核心线程数</label>
      <div class="col-sm-8">
        <input id="coreSize_txt" name="coreSize" field="coreSize" type="number" min="1" required class="form-control"/>
      </div>
    </div>

    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">缓冲队列大小</label>
      <div class="col-sm-8">
        <input id="capacity_txt" name="capacity" field="capacity" type="number" min="1" required class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">空闲线程存活时间(秒)</label>
      <div class="col-sm-8">
        <input id="aliveTime_txt" name="aliveTime" field="aliveTime" type="number" min="1" required
               class="form-control"/>
      </div>
    </div>
  </div>

  <div id="out_extcall_div" class="clear">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">配置三方插件</span>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">插件类</label>
      <div class="col-sm-8">
        <input id="exterClass_txt" name="exterClass" field="exterClass" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">报文与通讯函数</label>
      <div class="col-sm-8">
        <input id="externPackAndSend_txt" name="externPackAndSend" field="externPackAndSend" type="text"
               class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">组包函数</label>
      <div class="col-sm-8">
        <input id="externPack_txt" name="externPack" field="externPack" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">解包函数</label>
      <div class="col-sm-8">
        <input id="externUnpack_txt" name="externUnpack" field="externUnpack" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">通讯函数<span class="required"></span></label>
      <div class="col-sm-8">
        <input id="externSend_txt" name="externSend" field="externSend" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">组包前处理</label>
      <div class="col-sm-8">
        <input id="beforePack_txt" name="beforePack" field="beforePack" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">发送前请求处理</label>
      <div class="col-sm-8">
        <input id="beforeSend_txt" name="beforeSend" field="beforeSend" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">解包前处理</label>
      <div class="col-sm-8">
        <input id="beforeUnpack_txt" name="beforeUnpack" field="beforeUnpack" type="text" class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4">解包后处理</label>
      <div class="col-sm-8">
        <input id="beforeReturn_txt" name="beforeReturn" field="beforeReturn" type="text" class="form-control"/>
      </div>
    </div>
  </div>

  <div id="head_conifg_div">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">HTTP头配置</span>
      </div>
    </div>
    <div class="form-actions right">
      <a id="addHead_btn" type="button" class="btn btn-sm btn-danger fa fa-plus" style="margin:0 20px 20px;">添加</a>
    </div>
    <div id="default_key_value_div">
      <div class="form-group col-sm-5">
        <label class="control-label col-sm-4">键</label>
        <div class="col-sm-8">
          <input keyType="key" type="text" class="form-control"/>
        </div>
      </div>
      <div class="form-group col-sm-5">
        <label class="control-label col-sm-4" style="margin-bottom: 10px;">值</label>
        <div class="col-sm-8">
          <input keyType="value" type="text" class="form-control"/>
        </div>
      </div>
      <div class="form-group col-sm-2">
        <a class="btn btn-sm btn-warning fa fa-remove" onclick="removeHead(this)" type="button">删除</a>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {

    //根据类型初始化页面元素
    initDom();
    //绑定页面元素事件
    bindEvent();
  });

  //根据类型初始化页面元素
  function initDom() {
  
    if ($("#commType").val() == "IN") {

      $("#in_type_div").show();
      $("#out_type_div").remove();
      $("#out_extcall_div").remove();
    } else if ($("#commType").val() == "OUT") {
      $("#in_type_div").remove();
      $("#out_type_div").show();
      $("#out_extcall_div").show();
      //接出不展示连接池
      $("#threadPool_div").remove();
    }

    var entry = httpEntry;
    if (entry) {
      $("#default_key_value_div").remove();
      entry.forEach(function(item){
        $("#head_conifg_div").append(createHtml(item.key, item.value));
      })
    }
  }

  //绑定页面元素事件
  function bindEvent() {
    $("#addHead_btn").bind("click", function () {
      $("#head_conifg_div").append(createHtml());
    });

    $(".removeHead_btn").bind("click", function () {
      var parent = $("#btn defaul").parent();
      $(parent).remove();
    });
  }

  //删除头部信息
  function removeHead(opt) {
    var parent = $(opt).parents('.httpParent');
    $(parent).remove();
  }

  //创建键值数据
  function createHtml(key, value) {
    var html = '<div class="httpParent">' +
      '<div  class="form-group col-sm-5" style="margin-bottom: 10px;">' +
      '<label class="control-label col-sm-4">键</label>' +
      '<div class="col-sm-8" style="margin-bottom: 10px;">';

    if (key) {
      html += '<input  keyType="key" value="' + key + '" type="text" class="form-control"/>';
    } else {
      html += '<input  keyType="key" type="text" class="form-control"/>';
    }

    html += '</div></div>' +
      '<div  class="form-group col-sm-5" style="margin-bottom: 10px;">' +
      '<label class="control-label col-sm-4" style="margin-bottom: 10px;">值</label>' +
      '<div class="col-sm-8">';
    if (value) {
      html += '<input keyType="value" value="' + value + '" type="text" class="form-control"/>';
    } else {
      html += '<input keyType="value" type="text" class="form-control"/>';
    }
    html += '</div></div>' +
      '<div class="form-group col-sm-2">' +
      '<a class="btn btn-warning btn-sm fa fa-remove" onclick="removeHead(this)" type="button">删除</a>' +
      '</div>'
      '</div></div>';
    return html;
  }

</script>